<template>
    <div>
        <!-- 卡片视图 -->
        <el-card shadow="never">
            <el-form :model="Articleform">
                <el-form-item>
                    <!-- 文章内容块 -->
                    <article>
                        <div>
                            <h1 class="blog-title" v-text="Articleform.title"></h1>
                            <!-- 用<mavon-editor>标签显示文章内容 -->
                            <mavon-editor class="md" :value="Articleform.content" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true"></mavon-editor>
                        </div>
                    </article>
                </el-form-item>
                <!-- <div class="detail">
                    <div class="markdown-body">
                        <div class="article_message hljs renderNav" v-html="Articleform.content"></div>
                    </div>
                </div> -->

            </el-form>
        </el-card>
    </div>
</template>

<script>
    // import marked from "marked";
    // import "@/assets/css/markdown/dark.css"; //引入代码高亮的css
    // import hljs from "highlight.js";

    // import marked from "marked";
    // import hljs from "highlight.js";
    // import "highlight.js/styles/monokai-sublime.css";
    //封装成一个指令

    export default {
        data() {
            return {
                Articleform: {},
            }
        },
        mounted() {
            // var rendererMD = new marked.Renderer();
            // marked.setOptions({
            //     renderer: rendererMD,
            //     highlight: function(code) {
            //         return hljs.highlightAuto(code).value;
            //     },
            //     pedantic: false,
            //     gfm: true,
            //     tables: true,
            //     breaks: false,
            //     sanitize: false,
            //     smartLists: true,
            //     smartypants: false,
            //     xhtml: false,
            // });
            // this.Articleform.content = marked(this.code); // 将markdown内容解析
        },
        created() {
            this.getBlogOne()
        },
        methods: {
            async getBlogOne() {
                let id = this.$route.params.id
                const { data: res } = await this.$http.get(`/article/${id}`)
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                this.Articleform = res.results[0]
                // this.Articleform.content = marked(res.results[0].content);
                console.log(this.Articleform)
                console.log(this.Articleform.content)
                //给级联选项赋值cate_id
                // this.selectedKeys = res.results[0].cate_id;
                // console.log(this.selectedKeys);
                // this.Articleform.update_time = res.results[0].update_time;
            },
        },
    }
</script>

<style lang="sass" scoped>
</style>


